<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/showloading.css" rel="stylesheet" />

		<style>
			a:hover,
			a:visited,
			a:link,
			a:active {}
			
			.select_parent {
				display: table;
				width: calc(100%);
				table-layout: fixed;
				height: 40px;
				background: #FFFFFF;
			}
			
			.select_child {
				display: inline-block;
				height: 40px;
				width: 50%;
				text-align: center;
				line-height: 40px;
				font-size: 15px;
				color: #29ABE2;
				border-bottom: 2px solid #29ABE2;
			}
			
			.select_child1 {
				display: inline-block;
				height: 40px;
				width: 50%;
				text-align: center;
				line-height: 40px;
				font-size: 15px;
				color: #818181;
			}
			
			.li_parent {
				width: 100%;
				height: 80px;
				background-color: #FFFFFF;
			}
			
			.mui-table-view-cell {
				padding: 0px 0px;
			}
			
			.mui-bar-nav~.mui-content .mui-pull-top-pocket {
				top: 0px;
			}
			
			[v-cloak] {
				display: none;
			}
			
			.mui-popover {
				height: 300px;
				border-radius: 0px;
				width: 100%;
				bottom: 0;
			}
			/*.mui-scrollbar {
				display: none !important;
			}
			*/
			
			.text-deal {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				word-break: break-all;
				/* 追加这一行代码 */
			}
		</style>

	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav" style="background: #B01D29;text-align: center;">
			<img src="img/back.png" class=" tp-back mui-icon  mui-icon-left-nav mui-pull-left" style="height: 40px;width: 30px;"></img>
			<a class="mui-title " style="color: white;font: bold;font-size:20px ; ">余额明细</a>
		</header>
		<div class="mui-content">
			<div id="balancemain" style="background: #FFFFFF; z-index: 10; position:fixed;width: calc(100%);">
				<div style="width:100% ;height: 110px; text-align: center; ">
					<div style="padding-top: 20px;text-align: center;width: calc(100%);">
						<div style="display: table ;margin:auto;">
							<img src="img/user_icon.png" style="height: 25px; width: 25px;display: table-cell;vertical-align: middle;" />
							<a id="username" style="display: table-cell;vertical-align: middle;font-size: 14px; padding-left: 10px;color: #DCAAAC;">账户:</a>
						</div>

					</div>
					<p id="balance" style="padding-top: 15px; font-size: 32px; color: #ECAF60;">￥ 0</p>
					<p id="bnotice" style="padding-top: 1px; font-size: 15px; color: #DCAAAC;"></p>
				</div>
				<div id="select_main" class="select_parent">
					<span id="s_item1 " class="select_child select_child_a" style=" -webkit-box-flex:1;"><label >消费记录</label></span>
					<span id="s_item2 " class="select_child1 select_child_a" style=" -webkit-box-flex:1;"><label >充值记录</label></span>
				</div>
			</div>

			<!--下拉刷新容器-->
			<div id="list" class="mui-scroll-wrapper" style="margin-top: 196px;overflow-y: scroll;-webkit-overflow-scrolling: touch;">
				<div id="recordlist" class="mui-scroll">
					<ul class="mui-table-view" style="background-color: #F2F2F2;">
						<li class="li_parent mui-table-view-cell" v-cloak v-for="record in records" @tap="open_record(record)">
							<div style="height:45px ; float: left; width: 100%;">
								<p class="text-deal" style="float: left; width: 78%; line-height: 40px; font-size: 18px; color: #000000; padding-left: 15px;padding-top: 4px;">{{record.typename}}</p>
								<p style="float: left; width: 22%; text-align: left; line-height: 40px; font-size: 18px; color: #000000;padding-top: 4px;">￥{{record.money}}</p>
							</div>
							<div style="height:25px ;float: left; width: 100%;">
								<p style="float: left; width: 75%; line-height: 20px; font-size: 14px;padding-left: 15px;">{{record.date}}</p>
								<a style="float: left; width: 22%; text-align: center; line-height: 20px; font-size: 14px;">{{record.info}}</a>
							</div>
						</li>

					</ul>

				</div>
			</div>
		</div>
		<!--底部弹出菜单-->
		<div id="bottomPopover" class="mui-popover">
			<div style="height:35px ; float: left; width: 100%;">
				<p id="pop_title" style="float: left; width: 20%; line-height: 30px; font-size: 18px; color: #000000; padding-left: 15px;padding-top: 4px;"></p>
				<p id="pop_date" style="float: left; width: 58%; line-height: 30px; font-size: 14px; padding-top: 4px; text-align: left;"></p>
				<div style="float: left; width: 22%; text-align: center; line-height: 30px; font-size: 18px; color: #000000;padding-top: 4px;"><button @tap="close_pop()" style="height: 25px;padding:0px 0px; width: 50px; font-size: 16px;">确定</button></div>
			</div>
			<div class="scrollbar mui-scroll-wrapper" style="margin-top: 35px;margin-bottom: 35px; float: left;-webkit-overflow-scrolling: touch;">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="detail in details">
							<div style="height:35px ; float: left; width: 100%; background: #FFFFFF;">
								<p class="text-deal" style="float: left; width: 78%; line-height: 30px; font-size: 16px; color: #000000; padding-left: 15px;padding-top: 4px; ">{{detail.name}}</p>
								<p style="float: left; width: 22%; text-align: left; line-height: 30px; font-size: 16px; color: #000000;padding-top: 4px;">￥{{detail.price}}</p>
							</div>
						</li>

					</ul>

				</div>
			</div>
			<div style="height:35px ;  width: 100%;  position:absolute;left;0;bottom:0; background: #BF8284;">
				<p style="float: left; width: 78%; line-height: 30px; font-size: 18px; color: #FFFFFF; padding-left: 15px;padding-top: 4px;">总计</p>
				<p id="pop_total" style="float: left; width: 22%; text-align: left; line-height: 30px; font-size: 18px; color: #FFFFFF;padding-top: 4px;">￥0.00</p>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/showloading.js"></script>
		<script src="js/common.js"></script>
		<script>
			var sindex = 0;
			var uid = ""; //食堂id
			var uno = ""; //食堂no
			var usercard; //身份证
			var userid; //用户id
			var pageno = 1;
			var pagecount = 10;
			var pageindex;
			var ispopshow = false;
			$(document).ready(function() {
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				mui('.scrollbar').scroll({
					deceleration: deceleration
				});
				//获取地址栏上的userName
				userid = localStorage.getItem("userid");
				usercard = localStorage.getItem("usercard");
				console.log("userid:" + userid + "usercard:" + usercard);
				//mui初始化
				mui.init({
					pullRefresh: {
						deceleration: 0.0006,
						container: '#list',
						down: {
							style: 'circle',
							auto: true,
							callback: pulldownRefresh
						},
						up: {
							auto: false, //可选,默认false.自动上拉加载一次
							contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
							contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
							callback: pullupRefresh
						}
					}
				});
			})

			function goHistory() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if(isAndroid) {
					console.log('android');
					window.app.back();
				} else if(isIOS) {
					console.log('ios');
					window.webkit.messageHandlers.GoBack.postMessage(null);
				}
			}
			$(".tp-back").on("click", function() {

				goHistory();
			});
			//拦截安卓回退按钮
			history.pushState(null, null, location.href);
			window.addEventListener('popstate', function(event) {
				if(ispopshow) {
					history.pushState(null, null, location.href);
					//此处加入回退时你要执行的代码
					close_pop();
				} else {
					goHistory();
				}

			});
			//点击关闭pop
			//		$("#close_pop").on("click", function() {
			//			mui("#bottomPopover").popover('hide');
			//		});

			//点击关闭pop
			function close_pop() {
				mui("#bottomPopover").popover('hide');
				ispopshow = false;
			}
			//打开poppver弹窗
			function open_record(record) {
				if(sindex == 0) {
					mui('.scrollbar').scroll().scrollTo(0, 0);
					recorddetail.details = [];
					console.log("刷新内容" + JSON.stringify(record.details));
					if(JSON.stringify(record.details) != "[]") {

						if(record.details.length >= 7) {

							$(".mui-popover").height(300);
							console.log("长度：" + record.details.length);
						} else {
							$(".mui-popover").height((record.details.length * 35 + 80));
							console.log("长度：" + (record.details.length * 35 + 80));
						}
						$("#pop_title").html(record.typename);
						$("#pop_date").html(record.date);
						$("#pop_total").html("￥" + record.money);
						recorddetail.details = convert1(record.details);
						mui("#bottomPopover").popover('show');
						ispopshow = true;
					} else {
						mui.toast("没有详情内容");
					}
				}
			};

			$("#select_main .select_child_a").on("click", function() {
				var index = $(this).index();
				if(index != sindex) {
					$(".select_child_a ").eq(sindex).removeClass("select_child").addClass("select_child1");

					$(".select_child_a ").eq(index).removeClass("select_child1").addClass("select_child");

				}

				sindex = index;
				switch(index) {
					case 0: //消费记录
						console.log(index);
						pulldownRefresh();
						break;
					case 1: //充值记录
						console.log(index);
						pulldownRefresh();
						break;
				}

			});

			//下拉刷新数据方法
			function pulldownRefresh() {

				//	if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
				//		data.lastId = lastId;
				//		data.time = new Date().getTime() + "";
				//	}
				mui('#list').pullRefresh().scrollTo(0, 0);
				mui.showLoading("正在加载..", "div");

				if(uid == "") {
					mui.ajax(sthost + 'getcardinfo', {
						data: {
							no: usercard
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.data.length != 0) {
								console.log(JSON.stringify(data))
								$("#username").html("账号:" + data.data[0].no);
								$("#balance").html("¥ " + data.data[0].balance);
								if(data.data[0].balance > 400) {
									$("#bnotice").html("超过400元了，快去消费吧~");
								} else if(data.data[0].balance < 100) {
									$("#bnotice").html("低于100元了，快去充值吧~");
								} else {
									$("#bnotice").html("");
								}
								userid = data.data[0].id;
								userno = data.data[0].no;
								console.log(userid + "," + usercard);
								getConsumptionRecord();
							} else {
								mui.hideLoading();
								mui('#list').pullRefresh().endPulldownToRefresh();
								mui.toast("获取失败，请返回重试")
							}

						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
							mui.toast("获取失败，请返回重试")
							mui.hideLoading();
						}
					});
				} else {
					getConsumptionRecord();
				}
			}

			//上拉加载更多方法
			function pullupRefresh() {
				if(sindex == 0) {
					if(pageindex == pagecount) {
						pageno++;
						mui.ajax(sthost + 'getpaylist', {
							data: {
								uid: userid,
								uno: usercard,
								pageNo: pageno,
								pageCount: pagecount
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								if(data.data.length != 0) {
									recorddata.records = recorddata.records.concat(convert(data.data));
									pageindex = data.data.length;
									if(pageindex < pagecount) {
										mui('#list').pullRefresh().endPullupToRefresh(true);
									} else {
										mui('#list').pullRefresh().endPullupToRefresh();
									}
									console.log("数量:" + pageindex + "刷新内容" + JSON.stringify(data.data));
								} else {
									mui('#list').pullRefresh().endPullupToRefresh(true);
								}
								mui.hideLoading();
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log(type);
								mui('#list').pullRefresh().endPullupToRefresh();
								mui.hideLoading();
							}
						});

					}
				} else if(sindex == 1) {
					if(pageindex == pagecount) {
						pageno++;
						mui.ajax(sthost + 'getrechargelist', {
							data: {
								no: usercard,
								pageNo: pageno,
								pageCount: pagecount
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								if(data.data.length != 0) {
									recorddata.records = recorddata.records.concat(convert(data.data));
									pageindex = data.data.length;
									if(pageindex < pagecount) {
										mui('#list').pullRefresh().endPullupToRefresh(true);
									} else {
										mui('#list').pullRefresh().endPullupToRefresh();
									}
									console.log("数量:" + pageindex + "刷新内容" + JSON.stringify(data.data));
								} else {
									mui('#list').pullRefresh().endPullupToRefresh(true);
								}
								mui.hideLoading();
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log(type);
								mui('#list').pullRefresh().endPullupToRefresh();
								mui.hideLoading();
							}
						});
					}
				}

				//				setTimeout(function() {
				//					var data = getdata1();
				//					recorddata.records = recorddata.records.concat(convert(data.records));
				//					console.log("加载内容" + JSON.stringify(data.records));
				//					mui('#list').pullRefresh().endPullupToRefresh();
				//					mui.toast("加载了");
				//				}, 1000);

			}

			function getConsumptionRecord() {
				pageindex = 0;
				pageno = 1;

				if(sindex == 0) {
					mui.ajax(sthost + 'getpaylist', {
						data: {
							uid: userid,
							uno: usercard,
							pageNo: pageno,
							pageCount: pagecount
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.data.length != 0) {
								recorddata.records = [];
								recorddata.records = convert(data.data);
								pageindex = data.data.length;
								console.log("数量" + pageindex + "刷新内容" + JSON.stringify(data.data));
							}
							setTimeout(function() {
								mui('#list').pullRefresh().refresh(true);
								mui('#list').pullRefresh().endPullupToRefresh(false);
							}, 500);
							mui('#list').pullRefresh().endPulldownToRefresh();
							mui.hideLoading();
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
							mui('#list').pullRefresh().endPulldownToRefresh();
							mui.hideLoading();
						}
					});
				} else if(sindex == 1) {
					mui.ajax(sthost + 'getrechargelist', {
						data: {
							no: usercard,
							pageNo: pageno,
							pageCount: pagecount
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							if(data.data.length != 0) {
								recorddata.records = [];
								recorddata.records = convert(data.data);
								pageindex = data.data.length;
								console.log("数量" + pageindex + "刷新内容1" + JSON.stringify(data.data));
							}
							setTimeout(function() {
								mui('#list').pullRefresh().refresh(true);
								mui('#list').pullRefresh().endPullupToRefresh(false);
							}, 500);
							mui('#list').pullRefresh().endPulldownToRefresh();
							mui.hideLoading();
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
							mui('#list').pullRefresh().endPulldownToRefresh();
							mui.hideLoading();
						}
					});
				}

			}

			function convert(records) {
				var newRecords = [];
				if(sindex == 0) {
					records.forEach(function(record) {
						newRecords.push({
							id: record.seq,
							typename: checktypenmame1(record.term),
							money: record.amt,
							date: record.createDate,
							info: "详情",
							details: record.dishTradeDetailsList
						})
					});
				} else if(sindex == 1) {
					records.forEach(function(record) {
						newRecords.push({
							typename: checktypenmame2(record.type),
							money: record.amt,
							date: record.time,
							info: "",
							details: []
						})
					});

				}
				return newRecords;
			}

			function convert1(details) {
				var newDetails = [];

				details.forEach(function(detail) {
					newDetails.push({
						name: dishname(detail.name),
						price: detail.price
					})
				});
				return newDetails;
			}

			var checktypenmame1 = function(typeid) {
				var typename;
				switch(typeid) {
					case 100:
						typename = "食堂";
						break;
					case 108:
						typename = "咖啡厅";
						break;
					case 109:
						typename = "小卖部";
						break;
				}
				return typename;
			};
			var dishname = function(dishname) {
				var typename;
				if(dishname == "") {
					typename = "菜品";
				} else {
					typename = dishname;
				}
				return typename;
			};
			var checktypenmame2 = function(typeid) {
				var typename;
				switch(typeid) {
					case 3:
						typename = "充值";
						break;
					case 1131:
						typename = "补贴";
						break;
				}
				return typename;
			};
			var recorddata = new Vue({
				el: '#list',
				data: {
					records: [] //列表信息流数据
				}
			});

			var recorddetail = new Vue({
				el: '#bottomPopover',
				data: {
					details: [] //列表信息流数据
				}
			});
		</script>
	</body>

</html>